<template>
  <div class="hotel-container">
    <el-table
    :data="tableData"
    style="width: 100%"
    :default-sort = "{prop: 'date', order: 'descending'}"
    >
    <el-table-column
      prop="id"
      label="ID"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="酒店名称"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>
</template>
<script>
/* eslint-disable */

import axios from "axios";
export default {
  name: "Hotels",
  data() {
    return {
      tableData: []
    };
  },
  methods: {
    handleDelete(index, row) {
      this.tableData = this.tableData.filter(item => {
        return item.id !== row.id;
      });
    },
    getHotels() {
      axios
        .get("/api/hotels.json")
        .then(this.handlerHotel)
        .catch(error => console.log(error));
    },
    handlerHotel(res) {
      res = res.data;
      if (res.success && res.data) {
        this.tableData = res.data;
      }
    }
  },
  mounted() {
    this.getHotels();
  }
};
</script>
<style lang="scss" scoped>
.hotel-container {
  margin: 0 auto;
  width: 70em;
}
</style>
